<template>
  <div>
    <input
      type="text"
      v-model='name'
    >
    <input
      type="text"
      v-model='age'
    >
    <h1>{{name}}</h1>
    <h1>{{name.split('').reverse().join('')}}</h1>
    <h1>{{fn()}}</h1>
    <h1>{{rename}}</h1>
    <button @click='rename=666'>btn</button>
  </div>
</template>
<script>
// @ is an alias to /src
export default {
  name: "XXX",
  data() {
    return {
      name: "珠峰",
      age: 123,
    };
  },
  computed: {
    // rename() {
    //   // 计算属性有缓存  只要依赖(在这个函数里同步编写的变量)不发生改变  这个函数就不会执行
    //   console.log("computed");
    //   return this.name.split("").reverse().join("");
    // },

    rename: {
      get() {
        return this.name.split("").reverse().join("");
      },
      set(val) {
        console.log(val);
        this.name = (val + "").split("").reverse().join("");
      },
    },
  },
  watch: {
    name() {
      //  比较适用于  一变量改变 多个变量跟着修改的时候
      console.log("watch");
    },
  },
  methods: {
    fn() {
      console.log("methods");
      console.log(this);
      return this.name.split("").reverse().join("");
    },
  },
  components: {},
};
</script>
<style lang="less">
</style>